<style lang="less">
    @import "./home.less";
</style>
<template>
    <div class="home-main">
        <Row :gutter="12">
            <Col span="16">
                <Card>
                    <p slot="title">快捷操作</p>
                    <Row :gutter="16">
                        <Col span="8" v-if="userInfo.role_type == 4 || userInfo.role_type == 3">
                            <Card class="jumpCard" @click.native="toDemandPost">
                                <div style="text-align:center">
                                    <Icon type="compose" size="40" color="#2d8cf0"></Icon>
                                    <h3>发布需求</h3>
                                </div>
                            </Card>
                        </Col>
                        <Col span="8" v-if="userInfo.role_type == 4 || userInfo.role_type == 3">
                            <Card class="jumpCard" @click.native="demand_abutment(7)">
                                <div style="text-align:center">
                                    <Icon type="social-whatsapp" size="40" color="#2d8cf0"></Icon>
                                    <h3>对接管理</h3>
                                </div>
                            </Card>
                        </Col>
                        <Col span="8" v-if="userInfo.role_type == 5">
                            <Card class="jumpCard" @click.native="toServicePost">
                                <div style="text-align:center">
                                    <Icon type="compose" size="40" color="#2d8cf0"></Icon>
                                    <h3>发布服务</h3>
                                </div>
                            </Card>
                        </Col>
                        <Col span="8" v-if="userInfo.role_type == 5">
                            <Card class="jumpCard" @click.native="service_abutment(7)">
                                <div style="text-align:center">
                                    <Icon type="social-whatsapp" size="40" color="#2d8cf0"></Icon>
                                    <h3>对接管理</h3>
                                </div>
                            </Card>
                        </Col>
                        <Col span="8">
                            <Card class="jumpCard" @click.native="auth_click">
                                <div style="text-align:center">
                                    <Icon type="person" size="40" color="#2d8cf0"></Icon>
                                    <h3>账户管理</h3>
                                </div>
                            </Card>
                        </Col>
                    </Row>
                </Card>
                <Card style="margin-top:10px">
                    <p slot="title">待办事项</p>
                    <Row :gutter="16">
                        <Col span="6">
                            <InforCardMember class="mesbox" @click.native="toUnread" id-name="user_unread_count" :end-val="userInfo.unread_message_count" iconType="email" color="#2d8cf0" intro-text="未读消息"></InforCardMember>
                        </Col>
                        <Col span="6" v-if="userInfo.role_type == 4 || userInfo.role_type == 3">
                            <InforCardMember class="mesbox" @click.native="demand_initiated" id-name="r_provider_count" :end-val="userInfo.r_provider_count" iconType="paper-airplane" color="#ffd572" intro-text="发起的请求"></InforCardMember>
                        </Col>
                        <Col span="6" v-if="userInfo.role_type == 4 || userInfo.role_type == 3">
                            <InforCardMember class="mesbox" @click.native="demand_received" id-name="s_demander_count" :end-val="userInfo.s_demander_count"  iconType="ios-telephone" color="#64d572" intro-text="收到的请求"></InforCardMember>
                        </Col>
                        <Col span="6" v-if="userInfo.role_type == 5">
                            <InforCardMember class="mesbox" @click.native="interview_initiated" id-name="s_provider_count" :end-val="userInfo.s_provider_count" iconType="ios-telephone" color="#64d572" intro-text="发起的请求"></InforCardMember>
                        </Col>
                        <Col span="6" v-if="userInfo.role_type == 5">
                            <InforCardMember class="mesbox" @click.native="delivery_received" id-name="r_demander_count" :end-val="userInfo.r_demander_count" iconType="paper-airplane" color="#ffd572" intro-text="收到的请求"></InforCardMember>
                        </Col>
                        <!-- <Col span="8" v-if="userInfo.role_type == 5">
                            <InforCardMember @click.native="service_abutment(2)" class="mesbox" id-name="chatting_count" :end-val="userInfo.chatting_count" iconType="coffee" color="#f25e43" intro-text="正在约谈"></InforCardMember>
                        </Col> -->
                        <Col span="6" v-if="userInfo.role_type == 5">
                            <InforCardMember @click.native="service_abutment(3)" class="mesbox" id-name="comming_count" :end-val="userInfo.comming_count" iconType="android-contacts" color="#f25e43" intro-text="正在合作"></InforCardMember>
                        </Col>
                        <!-- <Col span="8" v-if="userInfo.role_type == 4 || userInfo.role_type == 3">
                            <InforCardMember @click.native="demand_abutment(2)" class="mesbox" id-name="chatting_count" :end-val="userInfo.chatting_count" iconType="coffee" color="#f25e43" intro-text="正在约谈"></InforCardMember>
                        </Col> -->
                        <Col span="6" v-if="userInfo.role_type == 4 || userInfo.role_type == 3">
                            <InforCardMember @click.native="demand_abutment(3)" class="mesbox" id-name="comming_count" :end-val="userInfo.comming_count" iconType="android-contacts" color="#f25e43" intro-text="正在合作"></InforCardMember>
                        </Col>
                    </Row>
                </Card>
            </Col>
            <Col span="8">
                <Card>
                    <Row type="flex" class="user-infor">
                        <Col span="8">
                            <Row class-name="made-child-con-middle" type="flex" align="middle">
                                <div class="div-avator"><img class="avator-img" :src="userInfo.logo.dataUrl" style="width:100%;"/></div>
                            </Row>
                        </Col>
                        <Col span="16" style="padding-left:6px;">
                            <div>
                                <b class="card-user-infor-name">{{userInfo.username}}</b>
                            </div>
                            <div>
                                <Button :type="userInfo.is_mobile_phone_authed?'success':'ghost'" 
                                    size="small" shape="circle" icon="android-phone-portrait" @click="auth_click()"
                                    :title="userInfo.is_mobile_phone_authed?'手机已认证':'手机未认证'"></Button>
                                <Button :type="userInfo.is_email_authed?'success':'ghost'" 
                                    size="small" shape="circle" icon="ios-email"  @click="auth_click()"
                                    :title="userInfo.is_email_authed?'邮箱已认证':'邮箱未认证'"></Button>
                                <Button :type="userInfo.status==2?'success':'ghost'" 
                                    size="small" shape="circle" icon="card"  @click="auth_click()"
                                    :title="userInfo.status==2?'身份已认证':'身份未认证'"></Button>
                            </div>
                        </Col>
                    </Row>
                    <Row style="margin-top:1em;">
                        <Col span="8"><p class="notwrap">上次登录时间:</p></Col>
                        <Col span="16" class="padding-left-8">{{ userInfo.last_login_log ? new Date(parseInt(userInfo.last_login_log.create_time)).toLocaleDateString()+" "+new Date(parseInt(userInfo.last_login_log.create_time)).getHours()+":"+new Date(parseInt(userInfo.last_login_log.create_time)).getMinutes(): "首次登陆"  }}</Col>
                    </Row>
                    <Row style="margin-top:1em;">
                        <Col span="8"><p class="notwrap">上次登录地点:</p></Col>
                        <Col span="16" class="padding-left-8">{{ userInfo.last_login_log ? userInfo.last_login_log.ip_location : "首次登陆" }}</Col>
                    </Row>
                </Card>
            </Col>
            <Col span="16" style="margin-top:10px">
                <Card>
                    <p slot="title"><span v-if="userInfo.role_type == 4">服务推荐</span><span v-if="userInfo.role_type == 5">需求推荐</span></p>
                    <Recommend></Recommend>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import InforCardMember from '@/common/components/inforCardMember.vue'
import CountUp from '@/common/components/countUp.vue'
import Recommend from '../main-components/Recommend'

export default {
    name: 'home',
    data () {
        return {

        };
    },
    components:{
        InforCardMember,
        CountUp,
        Recommend
    },
    computed:{
        userInfo() {
            return this.$store.state.user.info;
        }
    },
    methods:{
        toUnread(){
             this.$router.push({ name: "message_index"});
        },
        interview_initiated(){
             this.$router.push({ name: "interview_initiated"});
        },
        delivery_received(){
             this.$router.push({ name: "delivery_received"});
        },
        demand_received(){
             this.$router.push({ name: "demand_received"});
        },
        demand_initiated(){
             this.$router.push({ name: "demand_initiated"});
        },
        service_abutment(tab){
             this.$router.push({ name: "service_abutment", query: { tab: tab } });
        },
        demand_abutment(tab){
             this.$router.push({ name: "demand_abutment", query: { tab: tab } });
        },
        auth_click() {
            this.$router.push({ name: "account_safe" });
        },
        toDemandPost(){
            this.$router.push({ name: "post_demand_project" });
        },
        toServicePost(){
            this.$router.push({ name: "posted_service_projects", query: { show_create_modal: 1 } });
        }
    },
    created(){
    }
};
</script>
